<template>
  <div id="userFriends">
    <k-header headTitle="邀请好友" goBack="true"></k-header>
  <div class="user_friends_main" :class="headIos?'side-fixd-ios':'side-fixed'">
    <div class="user_friends_info">
      <img class="user_friends_banner" src="../../assets/img/center/friends_baner.png" alt="">
      <button class="user_friends_send">发送我的专属邀请链接</button>
      <p class="user_friends_tip">被邀请好友完成认证可，享受三次免费背调机会。</p>
    </div>
    <div class="user_friends_link">
      <div class="friends_link_left">
        <span class="add_friends">累计邀请</span>
        <span class="add_friends_time"><span class="friends_count">0</span>次</span>
      </div>
      <div class="friends_link_right">
        <span class="succ_friends">成功认证</span>
        <span class="add_friends_time"><span class="friends_count">0</span>次</span>
      </div>
    </div>
    <div class="friends_record">
      <p class="friends_record_list"><span class="friends_record_line"></span>邀请记录 <span class="friends_record_line"></span></p>
     <div v-show="showList">
       <img class="friends_count_img" src="../../assets/img/center/user_record.png" alt="">
       <p class="friends_count_nothing">没有记录</p>
     </div>
      <div class="friends_record_lists">
        <ul>
          <li v-for="recodes in recodelist" :key="recodes.id">
            <div>{{ recodes.getToMember.getRealName }}</div>
            <div class="friends_succ_info">
              <div class="friends_name_info">159****1219</div>
              <div class="friends_name_info friends_middle">奖励 <span>{{ recodes.getToMember.getMobile }}</span>元</div>
              <div class="friends_name_info friends_right">2017.01.01</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import kHeader from '../common/head'
  import util from '../../libs/util'
//  import { Cell, Group, Alert, Confirm, XDialog  } from 'vux'
  export default {
    name: 'userAbout',
    data () {
      return {
        showList:false,
        recodelist: '',
        headIos: false
      }
    },
    components: {
      kHeader
    },
    methods: {
      getrecode() {
        var that = this
        let url = '/lblsapp-h5/v2/memberInfo/invitationList.json'
        util.ajax.post(url).then(function(stats){
          console.log(stats.data.res.data.datas);
          that.recodelist = stats.data.res.data.datas
        }).catch(function(error){
          console.log(error);
        })
      }
    },
    created() {
      if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
        this.headIos = true;
      }
      this.getrecode();
    }
  }
</script>


<style scoped>
  ul,li {
    list-style: none;
  }
  #userFriends{
    height: 100%;
    width: 100%;
    margin-top: 46px;
  }
  .side-fixd-ios {
    margin-top: 20px;
  }
  .user_friends_main{
    text-align: center;
  }
  .user_friends_info{
    background: #fff;
  }
  .user_friends_banner{
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  .user_friends_send{
    width: 90%;
    height: 42px;
    background: #F89721;
    border-radius: 2px;
    color: #fff;
    font-size: 1.4rem;
    outline: none;
    border: none;
    margin-top: 30px;
  }
  .user_friends_tip{
    font-size: 1.2rem;
    color:#969696;
    padding: 20px 0 30px 0;
  }
  .user_friends_link{
   display: flex;
    margin-top: 30px;
  }
  .friends_link_left{
       flex:1;
    border-right: 1px solid #eceaea;
     }
  .friends_link_right{
    flex:1;
  }
  .add_friends{
    display: block;
  }
  .succ_friends{
    display: block;
  }
  .friends_count{
    font-size: 2rem;
    color: #212121;
    margin-right: 5px;
  }
  .add_friends_time{
    color: #808080;
  }
  .friends_count_nothing{
    font-size: 1.2rem;
    color: #808080;
  }
  .friends_count_img{
    width:39px ;
    height: 43px;
  }
  .friends_record{
    margin-top: 30px;
  }
  .friends_record_list{
    margin-bottom: 30px;
  }
  .friends_record_line{
    width: 30px;
    height: 1px;
    background: #212121;
    display: inline-block;
    position: relative;
    top: -4px;
    margin: 0 10px;
  }
  .friends_record_lists{
    background: #f5f5f5;
    height: 197px;
    overflow-y: auto;
  }
  .friends_record_lists li {
    padding: 10px 6% 10px 5%;
    text-align: left;
    border-bottom: 1px solid #ededed;
    overflow: hidden;
  }
  .friends_middle {
    text-align: center;
  }
  .friends_right {
    text-align: right;
  }
  .friends_succ_info{
    display: flex;
    margin-top: 6px;
  }
  .friends_name_info{
    flex:1
  }

</style>
